<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="业务系统" align="center">
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="sysName" label="系统名称" width="180"> </el-table-column>
        <el-table-column prop="sysyw" label="中心负责人" width="180"> </el-table-column>
        <!-- <el-table-column prop="sysType" label="系统类型" width="180"> </el-table-column> -->
        <!-- <el-table-column prop="sysRemark" label="系统功能描述" width="180"> </el-table-column>
        <el-table-column prop="sysRuntime" label="系统上线运行时间" width="180"> </el-table-column>
        <el-table-column prop="sysjf" label="所在机房" width="180"> </el-table-column> -->
      </el-table-column>
      <el-table-column label="厂商" align="center">
        <el-table-column prop="name" label="厂商"> </el-table-column>
        <el-table-column prop="name" label="负责人"> </el-table-column>
        <el-table-column prop="name" label="联系电话"> </el-table-column>
      </el-table-column>
      <el-table-column label="服务器" align="center">
        <el-table-column prop="amount1" label="IP地址"> </el-table-column>
        <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
        <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "1111",
          name: "王小虎",
          sysName: "市场化售电业务应用系统",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "1111",
          name: "王小虎",
          sysName: "市场化售电业务应用系统",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "1111",
          sysName: "市场化售电业务应用系统",
          name: "王小虎",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "1111",
          sysName: "市场化售电业务应用系统",
          name: "王小虎2",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "1111",
          sysName: "市场化售电业务应用系统",
          name: "王小虎2",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "1111",
          name: "王小虎3",
          sysName: "市场化售电业务应用系统",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "2222",
          sysName: "营销业务系统",
          name: "王小虎22",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "2222",
          sysName: "营销业务系统",
          name: "王小虎22",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
    };
  },
  created() {
    this.tableData;
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let inlen = this.calcRowIdCount(row.id);
        if (this.calcRowIdSame(row.id, rowIndex, column.property)) {
          return [0, 0];
        }
        return [inlen, 1];
      }
      if (columnIndex === 1) {
        // console.log(column.property, column.label);
        // console.log(row[column.property]);

        if (
          this.calcRowIdSame(row[column.property], rowIndex, column.property)
        ) {
          return [0, 0];
        }

        let inclen = this.calcColumn(
          row.id,
          column.property,
          row[column.property]
        );
        console.log(inclen);
        return [inclen, 1];
      }
    },
    calcColumn(inId, colname, colval) {
      console.log("in--", colval);
      this.tableData.forEach((item) => {
        console.log("--", item[colname]), console.log(item[colname] == colval);
      });
      let cutData = this.tableData.filter(
        (item) => item.id == inId && item[colname] == colval
      );

      return cutData.length;
    },
    calcRowIdSame(val, index, name) {
      if (index == 0) return false;
      return val == this.tableData[index - 1][name];
    },

    calcRowIdCount(inId) {
      let cutData = this.tableData.filter((item) => item.id == inId);
      //   console.log(cutData);
      return cutData.length;
    },
  },
};
</script>
